import React, { useEffect, useState } from 'react'
import MyHead from '../../components/MyHead'
import { SideBar } from 'antd-mobile'
import { useDispatch, useSelector } from 'react-redux'
import { data_newCategoryList, data_newsList, getNewCategoryList, getNewsList } from '../../rtk/reducers/dataSlice'
import { getNewCategoryListApi } from '../../api/news'
import MyNews from '../../components/MyNews'

const News = () => {
const [typeId, setTypeId] = useState<number>()
const dispatch = useDispatch()
const newCategoryList = useSelector(data_newCategoryList)
const newsList = useSelector(data_newsList)

// 初始化请求数据 
useEffect(()=>{
  dispatch(getNewCategoryList())},[])

    // 切换新闻分类 
    const changeNewList = (id:any)=>{
      console.log(id)
      setTypeId(id)
      dispatch(getNewsList({
          type:id,
      }))
  }


  return (
    <div className='news' style={{ height: '100%'}}>
      <MyHead title='新闻' noback={true}></MyHead>
      <div className="news-box" style={{ display:'flex', width: '100%', height: '100%', overflow: 'hidden', position:"fixed"}} >
        <div className="left" style={{ width: 90}}>
          <SideBar style={{ '--width': '80px' }} onChange={changeNewList}>
              {newCategoryList.map((item: any) => (
                  <SideBar.Item key={item.id} title={item.name} />
              ))}
          </SideBar>
        </div>
      <div className="right" style={{ flex: 1 ,flexShrink:0,}}>
        <MyNews list={newsList}></MyNews>
      </div>
    </div>
      </div>
  )
}

export default News